<template>
  <div style="height: 100%;" v-if="columnGroupData.length>0">
    <el-table class="my-group-table" v-loading="reqData.loading" ref="tableGrid" :data="reqData.tableData" border
      style="width: 100%" :row-style="rowStyle" :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      row-key="Id" :span-method="arraySpanMethod" :row-class-name="tableRowClassName" :default-expand-all="true"
      @header-dragend="headerDragend" @cell-mouse-enter="tableRowEnter" @cell-mouse-leave="tableRowLeave"
      @select-all="tableSelectAll" height="100%" @row-click="doEdit">
      <el-table-column type="selection" width="60" v-if="columnGroupData.length>0" align="left">
        <template slot-scope="scope">
          <span v-if="(scope.row.isHover||scope.row.isSelected)">
            <el-checkbox v-model="scope.row.isSelected" @change="(data) => {tableRowSelect(scope.row, data)}">
            </el-checkbox>
            <!-- <span @click="doEdit(scope.row.Id)" class="el-extend-span"
              v-if="scope.row.isHover&&!scope.row.levelIndex">
              <svg-icon icon-class="icon-extend" />
            </span> -->
          </span>
          <span v-if="!scope.row.isHover&&!scope.row.isSelected&&!scope.row.levelIndex">{{scope.row.rowIndex}}</span>
          <span v-if="scope.row.levelIndex">
            <span class="expend-icon">
              <i @click="doExpandRow(scope.row,false)" v-if="scope.row.Expand" style="color: #409EFF;"
                class="saas-iconfont saas-icon-xiajiantou"></i>
              <i @click="doExpandRow(scope.row,true)" v-else style="color: #409EFF;"
                class="saas-iconfont saas-icon-youjiantou"></i>
            </span>
          </span>
        </template>
      </el-table-column>
      <el-table-column :width="getcolumnWidth(item.name,2)" v-if="item.visibile"
        v-for="(item, index) in columnGroupData" :key="index" :prop="item.name" :label="item.label" align="left">
        <template slot-scope="scope">
          <!-- {{scope.column}} -->
          <span v-if="scope.row.levelIndex">
            <span v-if="scope.row[scope.column.property]">
              <span class="my-group-key-bg" v-for="item2 in scope.row[scope.column.property]">
                {{item2}}
              </span>
              <span class="my_group_summary_box" v-if="scope.row.groupSummary">
                {{ scope.row.groupSummary }}
              </span>
            </span>
            <span v-else>
            </span>
          </span>
          <span v-else>
            {{ scope.row[scope.column.property] }}
          </span>
        </template>
      </el-table-column>
      <el-table-column class-name="last-column" v-if="moreColumnVisible()" :key="99999">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import {
    mapGetters
  } from 'vuex'
  import draggable from "vuedraggable";
  export default {
    name: 'table-group',
    computed: {
      ...mapGetters(['routers', 'sidebar']),
      reqLoading() {
        return this.reqData.loading
      }
    },
    watch: {
      reqLoading: {
        handler(newValue, oldValue) {
          this.getTotalWidth()
        }
      }
    },
    props: {
      reqData: {
        type: Object,
        default: () => ({
          tableData: [],
          loading: false
        })
      },
      columnGroupData: {
        type: Array,
        default: () => ([])
      },
      sceneType: {
        type: Number,
        default: 0
      },
      sceneId: {
        type: Number,
        default: 0
      },
      defineSceneId: {
        type: Number,
        default: 0
      },
      // 表格高度
      tableHeight: {
        type: String,
        default: 0
      },
      rowStyle: {
        type: Object,
        default: () => ({})
      }
    },
    data() {
      return {
        selectionIds: [],
        totalWidth: 0
      }
    },
    created() {
      var that = this;
      that.$bus.$on('CLEARSELECTIONIDS', (data) => {
        if (data == this.defineSceneId) {
          setTimeout(() => {
            that.tableSelectAll([]);
          }, 500)
        }
      })
      this.$nextTick(() => {
        // 初始化表格
        this.getTotalWidth()
      })
    },
    methods: {
      getTotalWidth() {
        var totalWidth = 75
        if (this.columnGroupData.length == 0) {
          totalWidth = 0
        }
        this.columnGroupData.forEach((item) => {
          if (!item.visibile) {
            return true
          }
          var width = localStorage.getItem(this.defineSceneId + '_4_' + item.name)
          if (!width) {
            width = '200'
          }
          totalWidth += Number(width)
        })
        this.totalWidth = totalWidth
      },
      tableRowClassName({
        row,
        rowIndex
      }) {
        if (row.levelIndex == 1) {
          return 'my-top-row';
        }
        return '';
      },
      //合并行
      arraySpanMethod({
        row,
        column,
        rowIndex,
        columnIndex
      }) {
        if (row.children && row.children.length > 0) {
          if (columnIndex == 2) {
            return [1, row.totalColumn - 2];
          }
          if (columnIndex > 2) {
            return [0, 0];
          }
          return [1, 1];
          // if (columnIndex <= row.columnIndex) {
          //   return [1, 1];
          // }
          // if (columnIndex == row.columnIndex+1) {
          //   return [1, 2];
          // }
        }
      },
      headerDragend(newWidth, oldWidth, column, event) {
        localStorage.setItem(this.defineSceneId + '_2_' + column.property, newWidth)
        this.$nextTick(() => {
          // 初始化表格
          this.getTotalWidth()
        })
      },
      getcolumnWidth(property, type) {
        var width = localStorage.getItem(this.defineSceneId + '_' + type + '_' + property)
        return width || 150
      },
      //鼠标悬浮当前行触发
      tableRowEnter(row, column, cell, event) {
        row.isHover = true
      },
      //鼠标离开当前行触发
      tableRowLeave(row, column, cell, event) {
        row.isHover = false
      },
      //选中所有行触发
      tableSelectAll(rows) {
        var that = this
        var selection = rows.length > 0;
        that.toggleChildRowsSelection(that.reqData.tableData, selection)
        // this.tableGrid.toggleAllSelection()
        this.getSelectionIds()
      },
      toggleChildRowsSelection(rows, selection) {
        var that = this
        rows.forEach(item => {
          item.isSelected = selection
          // that.$refs.tableGrid.toggleRowSelection(item)
          if (item.children && item.children.length > 0) {
            that.toggleChildRowsSelection(item.children, selection)
          }
        })
      },
      //选中当前行触发
      tableRowSelect(row, value) {
        this.$refs.tableGrid.toggleRowSelection(row, value)
        if (row.children && row.children.length > 0) {
          this.toggleChildRowsSelection(row.children, value)
        }
        this.getSelectionIds()
      },
      //获取选中数据
      getSelectionIds() {
        var that = this
        this.selectionIds = []
        that.getAllChildrenSelectionIds(that.reqData.tableData)
        this.$$parent(this, "setSelectionIds", this.selectionIds)
      },
      getAllChildrenSelectionIds(rows) {
        var that = this
        rows.forEach(item => {
          if (item.isSelected && !item.levelIndex) {
            that.selectionIds.push(item.Id)
          }
          if (item.children && item.children.length > 0) {
            that.getAllChildrenSelectionIds(item.children)
          }
        })
      },
      //修改数据
      //     doEdit(Id) {
      //       if (!Id) {
      //         if (this.selectionIds.length === 0) {
      //           return
      //         }
      //         Id = this.selectionIds[0];
      //       }
      // //如果是点击第一列，则不执行跳转编辑
      // if(event.id!='el-table_1_column_1'){
      //    this.$$parent(this, "doEdit", row.Id)
      // }


      //       // this.$$parent(this, "doEdit", Id)
      //     },
      //修改数据
      doEdit(row, column, event) {
        if (!row.Id) {
          if (this.selectionIds.length === 0) {
            return
          }
          row.Id = this.selectionIds[0];
        }
        if (row.levelIndex) {
          return
        }
        //如果是点击第一列，则不执行跳转编辑
        if (column.type != 'selection') {
          var myColumn = this.columnGroupData.find((item) => item.name == column.property)
          //关联表数据
          if (myColumn && myColumn.formFieldType == 12) {
            if (row[column.property + '_relateList'] && row[column.property +
                '_relateList'].length > 0) {
              return
            }
            let relateTitle
            let relateSceneType = row[column.property + '_RelateSceneType']
            let relateSceneId = row[column.property + '_RelateSceneId']
            let relateDefineSceneId = row[column.property + '_RelateDefineSceneId']
            let relateDefineColumnId = row[column.property + '_RelateDefineColumnId']
            let fixedColumn = this.columnFinalData.find((x) => {
              return x.isFixed
            })
            if (fixedColumn && row[fixedColumn.name]) {
              relateTitle = row[fixedColumn.name]
            } else {
              let showColumn = this.columnFinalData.find((x) => {
                return x.visibile
              })
              if (showColumn && row[showColumn.name]) {
                relateTitle = row[showColumn.name]
              }
            }
            openRelate(relateSceneType, relateSceneId, relateDefineSceneId, relateDefineColumnId, relateTitle, row.Id)
            return
          }
          //附件
          if (myColumn && myColumn.formFieldType == 11 && row[column.property]) {
            return
          }
          this.$$parent(this, "doEdit", row.Id)
        }
      },
      doExpandRow(row, status) {
        row.Expand = status
        this.$refs.tableGrid.toggleRowExpansion(row, status);
      },
      moreColumnVisible() {
        var innerWidth = document.body.clientWidth - 300
        return innerWidth > this.totalWidth
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss">
  .el-table.my-group-table .el-table__row.my-top-row {
    background-color: #f8f8f8;
  }

  .el-table.my-group-table .el-table__row td.el-table__cell {
    border-left: 0;
    border-right: 1px solid #bbb;
  }

  .el-table .el-table__row td.el-table__cell:first-child {
    border-left: 0px solid #bbb;
  }

  .el-table.my-group-table .el-table__row td.el-table__cell:last-child {
    border-right: 0px solid #bbb;
  }

  .el-table.my-group-table .el-table__row td.el-table__cell .cell {
    border-left: 1px solid #fff;
  }

  .el-table.my-group-table.el-table--border .el-table__cell:first-child .cell {
    padding-left: 20px !important;
  }

  .el-table.my-group-table .el-table__row.my-top-row td.el-table__cell {
    border-right: 0px;
    padding-bottom: 0;
    vertical-align: top;
    border-left: 0px;
    padding-top: 10px;
  }

  .el-table.my-group-table .el-table__row.my-top-row td.el-table__cell:first-child .cell {
    border-left: 0px solid #dfe6ec;
    padding-left: 20px !important;
  }

  .el-table.my-group-table .el-table__row.my-top-row th.el-table__cell:first-child .cell {
    border-left: 0px solid #dfe6ec;
  }

  .el-table.my-group-table .el-table__row.my-top-row td.el-table__cell .cell {
    background-color: #fff;
    border-top: 1px solid #dfe6ec;
    border-right: 1px solid #bbb;
    line-height: 50px;
    height: 50px;
  }

  .el-table.my-group-table .el-table__row.my-top-row td.el-table__cell:last-child .cell {
    border-right: 0px;
  }

  .el-table.my-group-table.el-table--border {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background-color: #fff;
    border-left: 1px solid #bbb;
    border-right: 1px solid #bbb;
    border-bottom: 1px solid #bbb;
  }

  .el-table.my-group-table {
    border-color: #f8f8f8;
  }

  .el-table.my-group-table th.el-table__cell.is-leaf {
    border-bottom-color: #bbb;
    border-top: 1px solid #bbb;
  }

  .el-table.my-group-table.el-table--border th.el-table__cell:first-child {
    border-left: 0px solid #dfe6ec;
  }

  .my_group_summary_box {
    display: inline-block;
    margin-right: 10px;
    color: #888;
    float: right;
  }

  .expend-icon .saas-iconfont {
    cursor: pointer;
  }

  .el-table.my-group-table [class*=el-table__row--level] .el-table__expand-icon {
    display: none;
  }

  .el-table.my-group-table [class*=el-table__row--level] .el-table__placeholder {
    display: none;
  }

  .my-group-key-bg {
    background-color: #e1eaff;
    padding: 2px 5px;
    border-radius: 5px;
    margin-right: 5px;
  }

  .el-table.my-group-table.el-table--border th.el-table__cell.last-column {
    border-right: 0px !important;
  }

  .el-table.my-group-table.el-table--border td.el-table__cell.last-column {
    border-right: 0px !important;
  }
</style>
